<!-- 基金管理 -->
<template>
	<view class="moneymanageView">
		<view class="tab">
			<view class="Manage F">
				<text>基金管理</text>
				<view class="menus" @click="menu"><text>...</text></view>
				<view class="menu" v-show="select">
					<text @click="add">添加流水</text>
					<text @click="submit">批量提交</text>
					<text @click="records">提交记录</text>
				</view>
			</view>
		</view>
		<view class="choose">
			<image class="logo" src="../../static/tab5/date.png"></image>
			<view class="inputData"><lyzml-datepicker ref="lyzmlDatePicker" :config="datePickerConfig" @onDateChange="onBirthDayChange1"></lyzml-datepicker></view>
			<text class="single">到</text>
			<image class="logo" src="../../static/tab5/date.png"></image>
			<view class="inputData"><lyzml-datepicker ref="lyzmlDatePicker" :config="datePickerConfig" @onDateChange="onBirthDayChange"></lyzml-datepicker></view>
		</view>
		<view class="appliciation" v-for="(item, index) in moneymanagerList" :key="index">
			<view class="methods">
				<text class="method">{{ item.details }}</text>
				<text class="money">{{ item.money }}</text>
			</view>
			<view class="date">{{ item.createTime }}</view>
		</view>
		
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import lyzmlDatePicker from '../../components/lyzml-datepicker/lyzml-datepicker.vue';

export default {
	components: {
		uniIcons,
		lyzmlDatePicker
	},
	data() {
		return {
			refreshing: false,
			fetchPageNum: 1,
			pageSize: 10,
			pullFlag: true,
			moneymanagerList: [],
			datastring: '',
			startTime: '',
			endTime: '',
			select: false
		};
	},
	computed: {
		datePickerConfig: function() {
			let retObj = {
				yearsBefore: 15,
				yearsAfter: 5,
				initType: 'ymd',
				initDate: ''
			};
			return retObj;
		}
	},
	onShow() {
		this.startTime = this.start;
		this.endTime = this.end;
		this.fetchPageNum = 1;
		this.pullFlag = true;
		this.refreshing = false;
		this.getlists();
	},
	onReachBottom() {
		console.log('滑动到页面底部');
		this.contentText = '加载中...';
		if (this.pullFlag) {
			this.fetchPageNum += 1;
			this.pulllists();
		} else {
			this.contentText = '暂无更多数据';
		}
	},
	onPullDownRefresh() {
		// this.reload=true;
		console.log('下拉刷新');
		// this.getData();
		uni.startPullDownRefresh({
			//API开始下拉刷新操作
			success: res => {
				console.log('shuacin', this.fetchPageNum);
				this.refreshing = true;
				this.getlists(); //下拉刷新重新获取数据
				uni.stopPullDownRefresh(); //API停止下拉刷
			}
		});
	},
	methods: {
		onBirthDayChange1(e) {
			this.startTime = e.value;
			console.log('开始时间', this.startTime);
			this.getlists();
		},
		onBirthDayChange(e) {
			this.endTime = e.value;
			console.log('结束时间', this.endTime);
			this.getlists();
		},
		menu: function() {
			this.select = !this.select;
		},
		add() {
			uni.navigateTo({
				url: './addmoney'
			});
		},
		submit() {
			uni.navigateTo({
				url: './submit'
			});
		},
		records() {
			uni.navigateTo({
				url: './submitRecords'
			});
		},
		pulllists() {
			console.log(this.fetchPageNum);
			uni.request({
				url: this.$serverUrl + '/app/hospital/fundRecord/listByTime',
				data: {
					pageNumber: this.fetchPageNum, //当前页数
					pageSize: this.pageSize,
					startTime: this.startTime,
					endTime: this.endTime
				},
				method: 'POST',
				header: {
					token: uni.getStorageSync('token'),
					'content-type': 'application/json',
					'content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					console.log(res.data);
					// this.moneymanagerList = res.data.data;

					if (this.refreshing) {
						uni.showToast({
							title: '已经最新',
							icon: 'none'
						});
						this.refreshing = false;
						uni.stopPullDownRefresh();
						return;
					}
					let lists = [];
					let data = res.data.data;
					for (let i = 0; i < data.length; i++) {
						lists.push(data[i]);
					}
					if (lists.length < this.pageSize) {
						this.pullFlag = false;
					}
					console.log('得到lists', lists);
					this.moneymanagerList = this.moneymanagerList.concat(lists);

					console.log(this.moneymanagerList);
				}
			});
		},
		getlists() {
			uni.request({
				url: this.$serverUrl + '/app/hospital/fundRecord/listByTime',
				data: {
					pageNumber: 1,
					pageSize: this.pageSize,
					startTime: this.startTime,
					endTime: this.endTime
				},
				method: 'POST',
				header: {
					token: uni.getStorageSync('token'),
					'content-type': 'application/json',
					'content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					if (res.data.code == 0) {
						console.log(res.data);
						if (this.refreshing) {
							uni.showToast({
								title: '已经最新',
								icon: 'none'
							});
							this.refreshing = false;
							uni.stopPullDownRefresh();

							return;
						}
						let lists = [];
						let data = res.data.data;
						for (let i = 0; i < data.length; i++) {
							lists.push(data[i]);
						}
						if (lists.length < this.pageSize) {
							this.contentText = '暂无更多数据';
						}
						this.lists = res.data.data;
						console.log('得到lists', lists);
						if (this.refreshing) {
							this.refreshing = false;
							uni.stopPullDownRefresh();
							this.moneymanagerList = lists;
						} else {
							this.moneymanagerList = lists;
							console.info('this.fetchPageNum == ' + this.fetchPageNum);
							// this.fetchPageNum += 1;
							console.log(this.moneymanagerList);
						}
					}
					try {
						uni.getStorageSync('data', JSON.stringify(res.data.data.token));
					} catch (e) {}
				}
			});
		},
		setInitDate() {
			this.$refs.lyzmlDatePicker.initDate(this.startTime);
		}
	}
};
</script>

<style>
.moneymanageView {
	flex-direction: column;
}
.Manage {
	padding-top: 60upx;
	padding-bottom: 50upx;
	padding-left: 40upx;
	font-size: 40upx;
}
.f2 {
	position: absolute;
	margin-top: 20upx;
	right: 0;
	z-index: 10;
	width: 200upx;
}
.menus {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	width: 20upx;
	margin-right: 50upx;
	size: 80upx;
	font-size: 80upx;
}
.menu {
	background-color: #ffffff;
	position: absolute;
	top: 130upx;
	font-size: 30upx;
	right: 30upx;
	z-index: 10;
	width: 180upx;
	height: 240upx;
	border-color: #f5f5f5;
	border-width: 2upx;
	line-height: 60upx;
	text-align: center;
	flex-direction: column;
	margin-right: 0;
}
.choose {
	border-bottom-style: solid;
	border-bottom-width: 5upx;
	border-bottom-color: #f1f1f1;
	height: 100upx;
	width: 750upx;

	margin-top: 50upx;
}

.inputData {
	margin-left: 10upx;
	margin-bottom: 50upx;
}

.logo {
	margin-left: 50upx;
	margin-top: 5upx;
	height: 30upx;
	width: 30upx;
}
.single {
	margin-left: 40upx;
	margin-top: -2upx;
}
.appliciation {
	margin-left: 30upx;
	margin-right: 30upx;
	flex-direction: column;
	height: 200upx;
	border-bottom-style: solid;
	border-bottom-width: 5upx;
	border-bottom-color: #f1f1f1;
}

.methods {
	margin-top: 40upx;
	flex-direction: row;
	text-align: center;
}

.method {
	height: 70%;
	width: 70%;
	flex-direction: row;
	align-items: center;
	text-align: left;
}
.money {
	width: 30%;
	flex-direction: row;
	align-items: center;
	text-align: right;
}
.date {
	margin-top: 40upx;
	margin-left: 10upx;
}

page,
view {
	display: flex;
}

page {
	display: flex;
	min-height: 100%;
	background-color: #ffffff;
}

template {
	display: flex;
	flex: 1;
}
</style>
